<template>
  <div class="container" v-if="allData.value">
    <!-- 头部 -->
    <div class="top">
      <div class="detail-img">
        <img :src="allData.value.playlist.coverImgUrl" alt="">
      </div>
      <div class="content">
        <span class="title">{{ allData.value.playlist.name }}</span>
        <div class="user">
          <el-avatar size="large" :src="allData.value.playlist.creator.avatarUrl"
                     style="vertical-align: middle"></el-avatar>
          <span class="nickname">{{ allData.value.playlist.creator.nickname }}</span>
          <img
              v-if="allData.value.playlist.creator.avatarDetail !== null"
              class="level"
              :src="allData.value.playlist.creator.avatarDetail.identityIconUrl"
              alt="" srcset="">
        </div>
        <div class="tags">
          标签：<span class="tag" v-for="item in allData.value.playlist.tags">{{ item }}</span>
        </div>
        <div class="description">
          <span class="desc">{{ allData.value.playlist.description }}</span>
        </div>
      </div>
    </div>
    <!--  歌曲列表  -->
    <div class="table">
      <el-table :data="list.value" style="width: 100%" @cell-dblclick="CellClick">
        <el-table-column prop="song" label="歌曲名" width="180"/>
        <el-table-column label="歌手">
          <template v-slot="{row}">
            {{ row.singer }}
          </template>
        </el-table-column>
        <el-table-column label="专辑">
          <template v-slot="{row}">
            {{ row.al }}
          </template>
        </el-table-column>
        <el-table-column label="时长">
          <template v-slot="{row}">
            {{ row.dt }}
          </template>
        </el-table-column>
        <el-table-column label="">
          <template v-slot="{row}">
            <el-icon :size="30" class="icon-start" @click="playMusic(row)">
              <VideoPlay/>
            </el-icon>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup>
import {getPlaylistDetail, getMusicUrl, getLyric} from '../api/songlist.js'
import {useRoute} from "vue-router";
import {onMounted, reactive, ref} from "vue";
import {TimeForMate, formatLyric} from "../utils/tools.js"
import {useMusicStore} from "../store/index.js"

const MusicStore = useMusicStore()

onMounted(() => {
  getDetail()
})

// 点击播放
const CellClick = async (row) => {
  const res1 = await getMusicUrl(row.id)
  row.url = res1.data.data[0].url
  const res2 = await getLyric(row.id)
  MusicLyric.value = res2.data.lrc.lyric
  //格式化歌词
  formatLyric(MusicLyric.value)
  MusicStore.changeCurrentPlayMusic(row)
}

//获取路由里面的query参数
const route = useRoute()
//歌单id
const id = route.params.id
//歌单列表
const list = reactive([])
//歌单详情全部数据
const allData = reactive({})
//发起请求获取歌单详情数据
const getDetail = async () => {
  const res = await getPlaylistDetail(id)
  //格式化歌曲播放列表
  formatSongs(res.data.playlist.tracks, res.data.playlist.name)
  allData.value = res.data
  console.log(res.data)
}

//歌曲歌词
let MusicLyric = ref("")
//歌曲播放列表
let MusicPlayList = reactive([])
//播放音乐
const playMusic = async (row) => {
  const res1 = await getMusicUrl(row.id)
  const res2 = await getLyric(row.id)
  MusicLyric.value = res2.data.lrc.lyric
  //格式化歌词
  formatLyric(MusicLyric.value)
  row.url = res1.data.data[0].url
  MusicStore.changeCurrentPlayMusic(row)
}

//生成歌曲列表
const formatSongs = async (arr, songListName) => {
  let n = arr.length;
  for (let i = 0; i < n; i++) {
    let obj = {} //我们将每首歌的信息以对象的方式存储
    obj.id = arr[i].id
    obj.al = arr[i].al.name
    obj.img = arr[i].al.picUrl
    obj.song = arr[i].name
    obj.songListName = songListName
    obj.singer = arr[i].ar[0].name
    obj.dt = TimeForMate(arr[i].dt) //由于返回的歌曲时长单位是ms，我们还要将其转换成00：00的格式
    MusicPlayList.push(obj) //最后将这个歌曲对象存储到组件的songList歌曲列表属性上，最后用个v-for就可以在视图上呈现出来了
  }
  MusicStore.changeMusicPlayList(MusicPlayList)
  list.value = MusicStore.MusicPlayList
}


</script>

<style lang="scss" scoped>
.table {
  cursor: pointer;
}

.container {
  padding: 30px 20px;

  .icon-start {
    color: #aaaebc;

    &:hover {
      color: black;
    }
  }

  .top {
    height: 300px;
    width: 1220px;
    border-radius: 15px;
    background-color: #f1f2f5;
    display: flex;
    padding: 25px;

    .detail-img {
      height: 250px;
      width: 250px;

      img {
        width: 100%;
        border-radius: 10px;
      }
    }

    .content {
      margin: 0 15px;
      height: 250px;
      width: 880px;
      display: flex;
      flex-direction: column;


      .title {
        color: rgb(82 91 114);
        font-size: 22px;
        font-weight: 600;
        display: block;
        margin: 5px 0;
      }

      .user {
        margin: 15px 0;
        position: relative;

        .nickname {
          margin: 0 5px;
        }

        .level {
          width: 20px;
          height: 20px;
          position: absolute;
          top: 40px;
          left: 35px;
        }
      }

      .tags {
        font-size: 15px;
        color: rgb(82 91 114);

        .tag {
          margin-left: 10px;
        }
      }

      .description {
        margin-top: 20px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 4;
        overflow: hidden;
        text-overflow: ellipsis;

        .desc {
          font-size: 15px;
          color:rgb(82 91 114);
        }
      }

    }
  }
}
</style>
